<!--Page Title-->
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<div id="page-head">

    <div class="pad-all text-center">
        <h3>Welcome back to the Dashboard.</h3>
        <p1>Scroll down to see quick links and overviews of your Server, To do list, Order status or get some Help using Nifty.<p></p>
        </p1></div>
</div>
<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
<!--End page title-->

<!--Page content-->
<!--===================================================-->
<div id="page-content">

    <div class="row">
        <div class="col-lg-7">

            <!--Network Line Chart-->
            <!--===================================================-->
            <div id="demo-panel-network" class="panel">
                <div class="panel-heading">
                    <div class="panel-control">
                        <button id="demo-panel-network-refresh" class="btn btn-default btn-active-primary" data-toggle="panel-overlay" data-target="#demo-panel-network"><i class="demo-psi-repeat-2"></i></button>
                        <div class="dropdown">
                            <button class="dropdown-toggle btn btn-default btn-active-primary" data-toggle="dropdown" aria-expanded="false"><i class="demo-psi-dot-vertical"></i></button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                    <h3 class="panel-title">Network</h3>
                </div>


                <!--chart placeholder-->
                <div class="pad-all">
                    <div id="demo-chart-network" style="height: 255px; padding: 0px; position: relative;"><canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 560.75px; height: 255px;" width="560" height="255"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px;"><div style="position: absolute; max-width: 46px; top: 240px; left: 47px; text-align: center;" class="flot-tick-label tickLabel">5</div><div style="position: absolute; max-width: 46px; top: 240px; left: 96px; text-align: center;" class="flot-tick-label tickLabel">10</div><div style="position: absolute; max-width: 46px; top: 240px; left: 148px; text-align: center;" class="flot-tick-label tickLabel">15</div><div style="position: absolute; max-width: 46px; top: 240px; left: 201px; text-align: center;" class="flot-tick-label tickLabel">20</div><div style="position: absolute; max-width: 46px; top: 240px; left: 253px; text-align: center;" class="flot-tick-label tickLabel">25</div><div style="position: absolute; max-width: 46px; top: 240px; left: 306px; text-align: center;" class="flot-tick-label tickLabel">30</div><div style="position: absolute; max-width: 46px; top: 240px; left: 358px; text-align: center;" class="flot-tick-label tickLabel">35</div><div style="position: absolute; max-width: 46px; top: 240px; left: 410px; text-align: center;" class="flot-tick-label tickLabel">40</div><div style="position: absolute; max-width: 46px; top: 240px; left: 463px; text-align: center;" class="flot-tick-label tickLabel">45</div><div style="position: absolute; max-width: 46px; top: 240px; left: 515px; text-align: center;" class="flot-tick-label tickLabel">50</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 560.75px; height: 255px;" width="560" height="255"></canvas><div class="legend"><div style="position: absolute; width: 100.667px; height: 34px; top: 8px; left: 8px; background-color: rgb(255, 255, 255); opacity: 0.85;"> </div><table style="position:absolute;top:8px;left:8px;;font-size:smaller;color:#545454"><tbody><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(181,191,197);overflow:hidden"></div></div></td><td class="legendLabel">Download Speed</td></tr><tr><td class="legendColorBox"><div style="border:1px solid #ccc;padding:1px"><div style="width:4px;height:0;border:5px solid rgb(37,71,106);overflow:hidden"></div></div></td><td class="legendLabel">Upload Speed</td></tr></tbody></table></div></div>
                </div>


                <!--Chart information-->
                <div class="panel-body">

                    <div class="row">
                        <div class="col-lg-8">
                            <p class="text-semibold text-uppercase text-main">CPU Temperature</p>
                            <div class="row">
                                <div class="col-xs-5">
                                    <div class="media">
                                        <div class="media-left">
                                            <span class="text-3x text-thin text-main">43.7</span>
                                        </div>
                                        <div class="media-body">
                                            <p class="mar-no">°C</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-xs-7 text-sm">
                                    <p>
                                        <span>Min Values</span>
                                        <span class="pad-lft text-semibold">
					                                        <span class="text-lg">27°</span>
					                                        <span class="labellabel-success mar-lft">
					                                            <i class="pci-caret-down text-success"></i>
					                                            <smal>- 20</smal>
					                                        </span>
					                                        </span>
                                    </p>
                                    <p>
                                        <span>Max Values</span>
                                        <span class="pad-lft text-semibold">
					                                        <span class="text-lg">69°</span>
					                                        <span class="labellabel-danger mar-lft">
					                                            <i class="pci-caret-up text-danger"></i>
					                                            <smal>+ 57</smal>
					                                        </span>
					                                        </span>
                                    </p>
                                </div>
                            </div>

                            <hr>

                            <div class="pad-rgt">
                                <p class="text-semibold text-uppercase text-main">Today Tips</p>
                                <p class="text-muted mar-top">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</p>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <p class="text-uppercase text-semibold text-main">Bandwidth Usage</p>
                            <ul class="list-unstyled">
                                <li>
                                    <div class="media pad-btm">
                                        <div class="media-left">
                                            <span class="text-2x text-thin text-main">754.9</span>
                                        </div>
                                        <div class="media-body">
                                            <p class="mar-no">Mbps</p>
                                        </div>
                                    </div>
                                </li>
                                <li class="pad-btm">
                                    <div class="clearfix">
                                        <p class="pull-left mar-no">Income</p>
                                        <p class="pull-right mar-no">70%</p>
                                    </div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-info" style="width: 70%;">
                                            <span class="sr-only">70% Complete</span>
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <div class="clearfix">
                                        <p class="pull-left mar-no">Outcome</p>
                                        <p class="pull-right mar-no">10%</p>
                                    </div>
                                    <div class="progress progress-sm">
                                        <div class="progress-bar progress-bar-primary" style="width: 10%;">
                                            <span class="sr-only">10% Complete</span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>


            </div>
            <!--===================================================-->
            <!--End network line chart-->

        </div>
        <div class="col-lg-5">
            <div class="row">
                <div class="col-sm-6 col-lg-6">

                    <!--Sparkline Area Chart-->
                    <div class="panel panel-success panel-colorful">
                        <div class="pad-all">
                            <p class="text-lg text-semibold"><i class="demo-pli-data-storage icon-fw"></i> HDD Usage</p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">132Gb</span> Free Space
                            </p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">1,45Gb</span> Used space
                            </p>
                        </div>
                        <div class="pad-top text-center">
                            <!--Placeholder-->
                            <div id="demo-sparkline-area" class="sparklines-full-content"><canvas style="display: inline-block; width: 208.117px; height: 60px; vertical-align: top;" width="208" height="60"></canvas></div>
                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6">

                    <!--Sparkline Line Chart-->
                    <div class="panel panel-info panel-colorful">
                        <div class="pad-all">
                            <p class="text-lg text-semibold">Earning</p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">$764</span> Today
                            </p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">$1,332</span> Last 7 Day
                            </p>
                        </div>
                        <div class="pad-top text-center">

                            <!--Placeholder-->
                            <div id="demo-sparkline-line" class="sparklines-full-content"><canvas style="display: inline-block; width: 208.117px; height: 60px; vertical-align: top;" width="208" height="60"></canvas></div>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-6 col-lg-6">

                    <!--Sparkline bar chart -->
                    <div class="panel panel-purple panel-colorful">
                        <div class="pad-all">
                            <p class="text-lg text-semibold"><i class="demo-pli-basket-coins icon-fw"></i> Sales</p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">$764</span> Today
                            </p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">$1,332</span> Last 7 Day
                            </p>
                        </div>
                        <div class="text-center">

                            <!--Placeholder-->
                            <div id="demo-sparkline-bar" class="box-inline"><canvas style="display: inline-block; width: 209px; height: 78px; vertical-align: top;" width="209" height="78"></canvas></div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-6 col-lg-6">

                    <!--Sparkline pie chart -->
                    <div class="panel panel-warning panel-colorful">
                        <div class="pad-all">
                            <p class="text-lg text-semibold">Task Progress</p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">34</span> Completed
                            </p>
                            <p class="mar-no">
                                <span class="pull-right text-bold">79</span> Total
                            </p>
                        </div>
                        <div class="pad-all">
                            <div class="pad-btm">
                                <div class="progress progress-sm">
                                    <div style="width: 45%;" class="progress-bar progress-bar-light">
                                        <span class="sr-only">45%</span>
                                    </div>
                                </div>
                            </div>
                            <div class="pad-btm">
                                <div class="progress progress-sm">
                                    <div style="width: 89%;" class="progress-bar progress-bar-light">
                                        <span class="sr-only">89%</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!--Extra Small Weather Widget-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div class="panel">
                <div class="panel-body text-center clearfix">
                    <div class="col-sm-4 pad-top">
                        <div class="text-lg">
                            <p class="text-5x text-thin text-main">95</p>
                        </div>
                        <p class="text-sm text-bold text-uppercase">New Friends</p>
                    </div>
                    <div class="col-sm-8">
                        <button class="btn btn-pink mar-ver">View Details</button>
                        <p class="text-xs">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
                        <ul class="list-unstyled text-center bord-top pad-top mar-no row">
                            <li class="col-xs-4">
                                <span class="text-lg text-semibold text-main">1,345</span>
                                <p class="text-sm text-muted mar-no">Following</p>
                            </li>
                            <li class="col-xs-4">
                                <span class="text-lg text-semibold text-main">23K</span>
                                <p class="text-sm text-muted mar-no">Followers</p>
                            </li>
                            <li class="col-xs-4">
                                <span class="text-lg text-semibold text-main">278</span>
                                <p class="text-sm text-muted mar-no">Post</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End Extra Small Weather Widget-->


        </div>
    </div>

    <div class="row">
        <div class="col-md-4">
            <div class="panel panel-warning panel-colorful media middle pad-all">
                <div class="media-left">
                    <div class="pad-hor">
                        <i class="demo-pli-file-word icon-3x"></i>
                    </div>
                </div>
                <div class="media-body">
                    <p class="text-2x mar-no text-semibold">241</p>
                    <p class="mar-no">Documents</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-info panel-colorful media middle pad-all">
                <div class="media-left">
                    <div class="pad-hor">
                        <i class="demo-pli-file-zip icon-3x"></i>
                    </div>
                </div>
                <div class="media-body">
                    <p class="text-2x mar-no text-semibold">241</p>
                    <p class="mar-no">Zip Files</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-mint panel-colorful media middle pad-all">
                <div class="media-left">
                    <div class="pad-hor">
                        <i class="demo-pli-camera-2 icon-3x"></i>
                    </div>
                </div>
                <div class="media-body">
                    <p class="text-2x mar-no text-semibold">241</p>
                    <p class="mar-no">Photos</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-danger panel-colorful media middle pad-all">
                <div class="media-left">
                    <div class="pad-hor">
                        <i class="demo-pli-video icon-3x"></i>
                    </div>
                </div>
                <div class="media-body">
                    <p class="text-2x mar-no text-semibold">241</p>
                    <p class="mar-no">Videos</p>
                </div>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-sm-6 col-lg-4">
            <!--List Todo-->
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <div class="panel panel-trans">
                <div class="panel-heading">
                    <h3 class="panel-title">To do list</h3>
                </div>
                <div class="pad-ver">
                    <ul class="list-group bg-trans list-todo mar-no">
                        <li class="list-group-item">
                            <input id="demo-todolist-1" class="magic-checkbox" type="checkbox">
                            <label for="demo-todolist-1"><span>Find an idea. <span class="label label-danger">Important</span></span></label>
                        </li>
                        <li class="list-group-item">
                            <input id="demo-todolist-2" class="magic-checkbox" type="checkbox" checked="">
                            <label for="demo-todolist-2"><span>Do some work</span></label>
                        </li>
                        <li class="list-group-item">
                            <input id="demo-todolist-3" class="magic-checkbox" type="checkbox">
                            <label for="demo-todolist-3"><span>Read the book</span></label>
                        </li>
                        <li class="list-group-item">
                            <input id="demo-todolist-4" class="magic-checkbox" type="checkbox">
                            <label for="demo-todolist-4"><span>Upgrade server <span class="label label-warning">Warning</span></span></label>
                        </li>
                        <li class="list-group-item">
                            <input id="demo-todolist-5" class="magic-checkbox" type="checkbox" checked="">
                            <label for="demo-todolist-5"><span>Redesign my logo <span class="label label-info">2 Mins</span></span></label>
                        </li>
                    </ul>
                </div>
                <div class="input-group pad-all">
                    <input type="text" class="form-control" placeholder="New task" autocomplete="off">
                    <span class="input-group-btn">
					                    <button type="button" class="btn btn-success"><i class="demo-pli-add"></i></button>
					                </span>
                </div>
            </div>
            <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
            <!--End todo list-->
        </div>
        <div class="col-sm-6 col-lg-4">
            <div class="panel panel-trans">
                <div class="panel-heading">
                    <div class="panel-control">
                        <a title="" data-html="true" data-container="body" data-original-title="<p class='h4 text-semibold'>Information</p><p style='width:150px'>This is an information bubble to help the user.</p>" href="#" class="demo-psi-information icon-lg icon-fw unselectable text-info add-tooltip"></a>
                    </div>
                    <h3 class="panel-title">Services</h3>
                </div>
                <div class="bord-btm">
                    <ul class="list-group bg-trans">
                        <li class="list-group-item">
                            <div class="pull-right">
                                <input id="demo-online-status-checkbox" class="toggle-switch" type="checkbox" checked="">
                                <label for="demo-online-status-checkbox"></label>
                            </div>
                            Online status
                        </li>
                        <li class="list-group-item">
                            <div class="pull-right">
                                <input id="demo-show-off-contact-checkbox" class="toggle-switch" type="checkbox" checked="">
                                <label for="demo-show-off-contact-checkbox"></label>
                            </div>
                            Show offline contact
                        </li>
                        <li class="list-group-item">
                            <div class="pull-right">
                                <input id="demo-show-device-checkbox" class="toggle-switch" type="checkbox">
                                <label for="demo-show-device-checkbox"></label>
                            </div>
                            Show my device icon
                        </li>
                    </ul>
                </div>
                <div class="panel-body">
                    <div class="pad-btm">
                        <p class="text-semibold text-main">Upgrade Progress</p>
                        <div class="progress progress-md">
                            <div class="progress-bar progress-bar-purple" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width: 15%;" role="progressbar">
                                <span class="sr-only">15%</span>
                            </div>
                        </div>
                        <small>15% Completed</small>
                    </div>
                    <div>
                        <p class="text-semibold text-main">Database</p>
                        <div class="progress progress-md">
                            <div class="progress-bar progress-bar-success" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%;" role="progressbar">
                                <span class="sr-only">70%</span>
                            </div>
                        </div>
                        <small>70% Completed</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12 col-lg-4">
            <div class="panel panel-trans">
                <div class="pad-all">
                    <div class="media mar-btm">
                        <div class="media-left">
                            <img src="#(ctx)/common/img/profile-photos/2.png" class="img-md img-circle" alt="Avatar">
                        </div>
                        <div class="media-body">
                            <p class="text-lg text-main text-semibold mar-no">Ralph West</p>
                            <p>Project manager</p>
                        </div>
                    </div>
                    <blockquote class="bq-sm bq-open bq-close">Lorem ipsum dolor sit amet, consecte tuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.</blockquote>
                </div>

                <div class="bord-top">
                    <ul class="list-group bg-trans bord-no">
                        <li class="list-group-item list-item-sm">
                            <div class="media-left">
                                <i class="demo-psi-facebook icon-lg"></i>
                            </div>
                            <div class="media-body">
                                <a href="#" class="btn-link text-semibold">Facebook</a>
                            </div>
                        </li>
                        <li class="list-group-item list-item-sm">
                            <div class="media-left">
                                <i class="demo-psi-twitter icon-lg"></i>
                            </div>
                            <div class="media-body">
                                <a href="#" class="btn-link text-semibold">@RalphWe</a>
                                <br> Design my themes with <a href="#" class="btn-link text-bold">#Bootstrap</a> Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                            </div>
                        </li>
                        <li class="list-group-item list-item-sm">
                            <div class="media-left">
                                <i class="demo-psi-instagram icon-lg"></i>
                            </div>
                            <div class="media-body">
                                <a href="#" class="btn-link text-semibold">Ralphz</a>
                            </div>
                        </li>
                        <li class="list-group-item list-item-sm">
                            <div class="media-body">

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-12">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">Order Status</h3>
                </div>

                <!--Data Table-->
                <!--===================================================-->
                <div class="panel-body">
                    <div class="pad-btm form-inline">
                        <div class="row">
                            <div class="col-sm-6 table-toolbar-left">
                                <button class="btn btn-purple"><i class="demo-pli-add icon-fw"></i>Add</button>
                                <button class="btn btn-default"><i class="demo-pli-printer icon-lg"></i></button>
                                <div class="btn-group">
                                    <button class="btn btn-default"><i class="demo-pli-information icon-lg"></i></button>
                                    <button class="btn btn-default"><i class="demo-pli-trash icon-lg"></i></button>
                                </div>
                            </div>
                            <div class="col-sm-6 table-toolbar-right">
                                <div class="form-group">
                                    <input type="text" autocomplete="off" class="form-control" placeholder="Search" id="demo-input-search2">
                                </div>
                                <div class="btn-group">
                                    <button class="btn btn-default"><i class="demo-pli-download-from-cloud icon-lg"></i></button>
                                    <div class="btn-group dropdown">
                                        <button class="btn btn-default btn-active-primary dropdown-toggle" data-toggle="dropdown">
                                            <i class="demo-pli-dot-vertical icon-lg"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                            <li><a href="#">Action</a></li>
                                            <li><a href="#">Another action</a></li>
                                            <li><a href="#">Something else here</a></li>
                                            <li class="divider"></li>
                                            <li><a href="#">Separated link</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>Invoice</th>
                                <th>User</th>
                                <th>Order date</th>
                                <th>Amount</th>
                                <th class="text-center">Status</th>
                                <th class="text-center">Tracking Number</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td><a href="#" class="btn-link"> Order #53431</a></td>
                                <td>Steve N. Horton</td>
                                <td><span class="text-muted">Oct 22, 2014</span></td>
                                <td>$45.00</td>
                                <td class="text-center">
                                    <div class="label label-table label-success">Paid</div>
                                </td>
                                <td class="text-center">-</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link"> Order #53432</a></td>
                                <td>Charles S Boyle</td>
                                <td><span class="text-muted">Oct 24, 2014</span></td>
                                <td>$245.30</td>
                                <td class="text-center">
                                    <div class="label label-table label-info">Shipped</div>
                                </td>
                                <td class="text-center">CGX0089734531</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link"> Order #53433</a></td>
                                <td>Lucy Doe</td>
                                <td><span class="text-muted">Oct 24, 2014</span></td>
                                <td>$38.00</td>
                                <td class="text-center">
                                    <div class="label label-table label-info">Shipped</div>
                                </td>
                                <td class="text-center">CGX0089934571</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link"> Order #53434</a></td>
                                <td>Teresa L. Doe</td>
                                <td><span class="text-muted">Oct 15, 2014</span></td>
                                <td>$77.99</td>
                                <td class="text-center">
                                    <div class="label label-table label-info">Shipped</div>
                                </td>
                                <td class="text-center">CGX0089734574</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link"> Order #53435</a></td>
                                <td>Teresa L. Doe</td>
                                <td><span class="text-muted">Oct 12, 2014</span></td>
                                <td>$18.00</td>
                                <td class="text-center">
                                    <div class="label label-table label-success">Paid</div>
                                </td>
                                <td class="text-center">-</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link">Order #53437</a></td>
                                <td>Charles S Boyle</td>
                                <td><span class="text-muted">Oct 17, 2014</span></td>
                                <td>$658.00</td>
                                <td class="text-center">
                                    <div class="label label-table label-danger">Refunded</div>
                                </td>
                                <td class="text-center">-</td>
                            </tr>
                            <tr>
                                <td><a href="#" class="btn-link">Order #536584</a></td>
                                <td>Scott S. Calabrese</td>
                                <td><span class="text-muted">Oct 19, 2014</span></td>
                                <td>$45.58</td>
                                <td class="text-center">
                                    <div class="label label-table label-warning">Unpaid</div>
                                </td>
                                <td class="text-center">-</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <hr class="new-section-xs">
                    <div class="pull-right">
                        <ul class="pagination text-nowrap mar-no">
                            <li class="page-pre disabled">
                                <a href="#">&lt;</a>
                            </li>
                            <li class="page-number active">
                                <span>1</span>
                            </li>
                            <li class="page-number">
                                <a href="#">2</a>
                            </li>
                            <li class="page-number">
                                <a href="#">3</a>
                            </li>
                            <li>
                                <span>...</span>
                            </li>
                            <li class="page-number">
                                <a href="#">9</a>
                            </li>
                            <li class="page-next">
                                <a href="#">&gt;</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <!--===================================================-->
                <!--End Data Table-->

            </div>
        </div>
    </div>



</div>
<!--===================================================-->
<!--End page content-->

<script>


    // Dashboard.js
    // ====================================================================
    // This file should not be included in your project.
    // This is just a sample how to initialize plugins or components.
    //
    // - ThemeOn.net -


    $(document).on('nifty.ready', function() {

        // NETWORK CHART
        // =================================================================
        // Require Flot Charts
        // -----------------------------------------------------------------
        // http://www.flotcharts.org/
        // =================================================================

        var dwData = [[1, 24], [2, 34], [3, 33], [4, 22], [5, 28], [6, 60], [7, 60], [8, 70], [9, 67], [10, 86], [11, 86], [12, 113], [13, 130], [14, 114], [15, 80], [16, 109], [17, 100], [18, 105], [19, 110], [20, 102], [21, 107], [22, 60], [23, 67], [24, 76], [25, 73], [26, 94], [27, 135], [28, 154], [29, 120], [30, 100], [31, 130], [32, 100], [33, 60], [34, 70], [35, 67], [36, 86], [37, 86], [38, 113], [39, 130], [40, 114], [41, 80], [42, 109], [43, 100], [44, 105], [45, 110], [46, 102], [47, 107], [48, 60], [49, 67], [50, 76], [51, 73], [52, 94], [53, 79]],
            upData = [[1, 2], [2, 22], [3, 7], [4, 6], [5, 17], [6, 15], [7, 17], [8, 7], [9, 18], [10, 18], [11, 18], [12, 29], [13, 23], [14, 10], [15, 22], [16, 7], [17, 6], [18, 17], [19, 15], [20, 17], [21, 7], [22, 18], [23, 18], [24, 18], [25, 29], [26, 13], [27, 2], [28, 22], [29, 7], [30, 6], [31, 17], [32, 15], [33, 17], [34, 7], [35, 18], [36, 18], [37, 18], [38, 29], [39, 23], [40, 10], [41, 22], [42, 7], [43, 6], [44, 17], [45, 15], [46, 17], [47, 7], [48, 18], [49, 18], [50, 18], [51, 29], [52, 13], [53, 24]];

        var plot = $.plot('#demo-chart-network', [
            {
                label: 'Download Speed',
                data: dwData,
                lines: {
                    show: true,
                    lineWidth: 0,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.2
                        }, {
                            opacity: 0.2
                        }]
                    }
                },
                points: {
                    show: false
                }
            },
            {
                label: 'Upload Speed',
                data: upData,
                lines: {
                    show: true,
                    lineWidth: 0,
                    fill: true,
                    fillColor: {
                        colors: [{
                            opacity: 0.9
                        }, {
                            opacity: 0.9
                        }]
                    }
                },
                points: {
                    show: false
                }
            }
        ], {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                },
                shadowSize: 0 // Drawing is faster without shadows
            },
            colors: ['#b5bfc5','#25476a'],
            legend: {
                show: true,
                position: 'nw',
                margin: [0, 0]
            },
            grid: {
                borderWidth: 0,
                hoverable: true,
                clickable: true
            },
            yaxis: {
                show: false,
                ticks: 5,
                tickColor: 'rgba(0,0,0,.1)'
            },
            xaxis: {
                show: true,
                ticks: 10,
                tickColor: 'transparent'
            },
            tooltip: {
                show: true,
                content: "<div class='flot-tooltip text-center'><h5 class='text-main'>%s</h5>%y.0 Mbps</div>"
            }
        });






        // HDD USAGE - SPARKLINE LINE AREA CHART
        // =================================================================
        // Require sparkline
        // -----------------------------------------------------------------
        // http://omnipotent.net/jquery.sparkline/#s-about
        // =================================================================
        var hddSparkline = function() {
            $("#demo-sparkline-area").sparkline([57,69,70,62,73,79,76,77,73,52,57,50,60,55,70,68,57,62,53,69,59,67,69,58,50,47,65], {
                type: 'line',
                width: '100%',
                height: '60',
                spotRadius: 4,
                lineWidth: 2,
                lineColor:'rgba(255,255,255,.85)',
                fillColor: 'rgba(0,0,0,0.1)',
                spotColor: 'rgba(255,255,255,.5)',
                minSpotColor: 'rgba(255,255,255,.5)',
                maxSpotColor: 'rgba(255,255,255,.5)',
                highlightLineColor : '#ffffff',
                highlightSpotColor: '#ffffff',
                tooltipChartTitle: 'Usage',
                tooltipSuffix:' %'

            });
        }



        // EARNING - SPARKLINE LINE CHART
        // =================================================================
        // Require sparkline
        // -----------------------------------------------------------------
        // http://omnipotent.net/jquery.sparkline/#s-about
        // =================================================================
        var earningSparkline = function(){
            $("#demo-sparkline-line").sparkline([945, 754, 805, 855, 678, 987, 1026, 885, 878, 922, 875, ], {
                type: 'line',
                width: '100%',
                height: '60',
                spotRadius: 0,
                lineWidth: 2,
                lineColor: '#ffffff',
                fillColor: false,
                minSpotColor: false,
                maxSpotColor: false,
                highlightLineColor: '#ffffff',
                highlightSpotColor: '#ffffff',
                tooltipChartTitle: 'Earning',
                tooltipPrefix: '$ ',
                spotColor: '#ffffff',
                valueSpots: {
                    '0:': '#ffffff'
                }
            });
        }



        // SALES - SPARKLINE BAR CHART
        // =================================================================
        // Require sparkline
        // -----------------------------------------------------------------
        // http://omnipotent.net/jquery.sparkline/#s-about
        // =================================================================

        var barEl = $("#demo-sparkline-bar");
        var barValues = [40,32,65,53,62,55,24,67,45,70,45,56,34,67,76,32,65,53,62,55,24,67,45,70,45,56,70,45,56,34,67,76,32,65,53];
        var barValueCount = barValues.length;
        var barSpacing = 1;
        var salesSparkline = function(){
            barEl.sparkline(barValues, {
                type: 'bar',
                height: 78,
                barWidth: Math.round((barEl.parent().width() - ( barValueCount - 1 ) * barSpacing ) / barValueCount),
                barSpacing: barSpacing,
                zeroAxis: false,
                tooltipChartTitle: 'Daily Sales',
                tooltipSuffix: ' Sales',
                barColor: 'rgba(0,0,0,.15)'
            });
        }


        $(window).on('resizeEnd', function(){
            hddSparkline();
            earningSparkline();
            salesSparkline();
        })
        hddSparkline();
        earningSparkline();
        salesSparkline();





        // PANEL OVERLAY
        // =================================================================
        // Require Nifty js
        // -----------------------------------------------------------------
        // http://www.themeon.net
        // =================================================================
        $('#demo-panel-network-refresh').niftyOverlay({
            iconClass : 'demo-psi-repeat-2 spin-anim icon-2x'
        }).on('click', function(){
            var $el = $(this), relTime;

            $el.niftyOverlay('show');


            relTime = setInterval(function(){
                $el.niftyOverlay('hide');
                clearInterval(relTime);
            },2000);
        });


    });


</script>